<!--
 * @Author: your name
 * @Date: 2021-02-20 17:34:41
 * @LastEditTime: 2021-02-22 14:03:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\wifi\bindWifi.vue
-->
<template>
    <div>
        <el-dialog
            :title='deviceSnLabel'
            :visible="visibleShow"
            class="el-dialog-sm"
            @close="()=>{$store.commit('setVisibleShow',false)}"
             width='800px'
            :close-on-click-modal='false'
            >
            <div style="padding-bottom:35px;">
                <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border stripe :column='column' :select='false' >
                    <template #deviceType="{data}">
                        {{ comm.returnCode(moduleTypeList,data.deviceType) }}
                    </template>
                    <template #onLineStatus="{data}">
                        <span :style='data.onLineStatus==1?"color:#429dff":""'>
                            <i class="iconfont icon-wifi" style="vertical-align: middle;" ></i>
                            <!-- {{returnStatus(data.enableFlag)}} -->
                            {{ comm.returnCode(dictionary.ON_LINE_STATE,data.onLineStatus) }}
                        </span>
                    </template>
                </baseTable>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTableNew'
export default {
    components: {
        baseTable
    },
    props: {
        wifiSn: {
            type: String,
            default: ''
        },
        moduleType: {
            type: Number,
            default: null
        },
        dictionary: {
            type: Object,
            default: () => {
                return {}
            }
        },
        deviceSnLabel: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            moduleTypeList: [],
            dataRows:[],
            column:[{
                title: this.deviceSnLabel,
                value: 'deviceSN',
                slot: 'deviceSN'
            },
            {
                title: this.$t('devWifi.deviceType'),
                value: 'deviceType',
                slot: 'deviceType',
            },
            {
                title: this.$t('device.inverter.enableFlag'),
                value: 'onLineStatus',
                slot: 'onLineStatus'
            }],
            loading:false,
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {
        visibleShow(){
            return this.$store.state.sysStore.visibleShow
        }
    },
    watch: {
    },
    created() {

    },
    mounted() {
        this.wifiGetDeviceTypeList()
        this.initTable()
    },
    methods: {
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        async wifiGetDeviceTypeList(){
            let res = await this.API.wifiGetDeviceTypeList({
                moduleType: this.moduleType
            })
            this.moduleTypeList = res
            console.log(this.moduleTypeList , 'moduleTypeList-0--')
        },
        async initTable(){
            this.loading = true
            let res = await this.API.wifiGetDevicePage({
                wifiSN:this.wifiSn,
                moduleType: this.moduleType,
                size: this.size,
                current: this.current
            })
            this.total = res.total
            this.dataRows = res.rows || []
            this.loading = false
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
